<!--
 * @Author: gavindon
 * @LastEditors: gavindon 530893850@qq.com
 * @Date: 2023-04-11 14:19:12
 * @LastEditTime: 2023-04-14 16:35:55
 * @Description: 
-->
<template>
    <div id="login">

        <div class="w-1/3   flex-col justify-center  items-center  h-full">
            <el-form :model="form" class="w-full p-10 ml-10" :rules="rules" ref="ruleFormRef">
                <el-form-item prop="name">
                    <el-input prefix-icon="user" v-model="form.name" placeholder="帐号" clearable>
                    </el-input>
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input prefix-icon="unlock" type="password" show-password v-model="form.pwd" placeholder="密码"
                        clearable></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" class="w-full m-2" round @click="submitForm(ruleFormRef)">登录</el-button>
                </el-form-item>

            </el-form>

        </div>

    </div>
</template>

<script setup lang='ts'>
import { reactive, ref } from "vue"
import type { FormInstance, FormRules } from 'element-plus'
import { fuelGet, fuelPost } from "@/http"
import router from "@/router";
import { useLocalStorage, useStorage } from "@vueuse/core";


const ruleFormRef = ref<FormInstance>()

const form = reactive({
    name: "",
    pwd: ""
})

const rules = reactive<FormRules>({
    name: [
        { required: true, message: '请输入帐号', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在3-5之间', trigger: 'blur' },
    ],
    pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            postLogin()
        } else {
        }
    })
}

function postLogin() {
    fuelPost("/org", { name: form.name, password: form.pwd }).then(resp => {

        localStorage.setItem("cookie", "ok")

        router.push("/")

    }).catch(err => {


    })

}


</script>

<style lang="scss" scoped>
#login {
    background: url('@/assets/login_bg.jpg') no-repeat center center fixed;
    width: 100%; //大小设置为100%
    height: 100%; //大小设置为100%
    position: fixed;
    background-size: 100% 100%;
}
</style>
